<!-- 城市选择组件 -->
<template>
	<view class="locationBox2">
		<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"
			emptyText="暂无数据"></uni-data-select>
	</view>
</template>

<script>
	// vuex引入
	import {
		mapGetters
	} from 'vuex'

	export default {
		props: {
			/**
			 * 提交方法
			 */
			submit: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				value: 0, // 选择数据
				range: [], // 下拉框数据
			};
		},
		created() {
			this.rangeListInit()
		},
		computed: {
			...mapGetters(['locationAreaList', 'userInfo']),
		},
		methods: {
			/**
			 * 修改选项
			 */
			change(e) {
				this.value = e
				this.$emit('submit', this.value)
			},

			/**
			 * 初始化下拉列表
			 */
			rangeListInit() {
				this.locationAreaList.map(res => {
					this.userInfo?.cityCodes.map(res2 => {
						if (res.value === res2) {
							this.range.push({
								text: res.text,
								value: res.value
							})
						}
					})
				})


				this.change(this.range[0].value)

			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-select {
		border: none;
		padding: 0 !important;
	}

	/deep/ .uni-icons.uniui-bottom {
		color: #EC606F !important;
	}

	/deep/ .uni-icons.uniui-top {
		color: #EC606F !important;
	}

	/deep/ .uni-select__input-text {
		#font(28rpx, #0f0f0f, 700);
		margin-right: 8rpx;
	}

	/deep/ .uni-select__selector {
		width: 400rpx;
	}

	.citySelect {}
</style>